import React, { useEffect, useRef, useState } from 'react';
import { Table } from 'tdesign-react';
import Style from './index.module.less';

interface Iprops {
  dataSource: any[];
  columns: any[];
  rowKey: string;
  loading: boolean;
  pagination: any;
  selectedRowKeys?: (string | number)[];
  onSelectChange?: (value: (string | number)[]) => void;
  scroll?: any;
  tableHeight?: string | number;
}

const DEFAULT_OFFSET = 260; // 默认表格外部高度占用

const IppeakTable: React.FC<Iprops> = ({
  dataSource,
  columns,
  rowKey,
  loading,
  pagination,
  selectedRowKeys,
  onSelectChange,
  scroll,
  tableHeight = 288,
}) => {
  const wrapperRef = useRef<HTMLDivElement>(null);

  return (
    <div ref={wrapperRef} className={Style.ippeakTable}>
      <Table
        loading={loading}
        height={`calc(100vh - ${tableHeight}px)`}
        data={dataSource}
        columns={columns}
        rowKey={rowKey}
        selectedRowKeys={selectedRowKeys}
        hover
        onSelectChange={onSelectChange}
        pagination={pagination}
        scroll={{ type: 'lazy', ...scroll }}
      />
    </div>
  );
};

export default IppeakTable;
